import { Carousel } from "antd";
import { CarouselRef } from "antd/es/carousel";
import { Dispatch, FC, HTMLAttributes, PropsWithChildren, SetStateAction, useEffect, useRef } from "react";
import { StyledDots } from "../../../ConfigurePage.styled";
import { CatItem, SwiperItem } from "../../../ConfigurePageType";

interface ModuleCarouselProps {
	activeIndex: number;
	setActiveIndex: Dispatch<SetStateAction<number>>;
	list: (CatItem | SwiperItem | unknown)[];
	dotsStyle?: HTMLAttributes<HTMLDivElement>["style"];
}
export const ModuleCarousel: FC<PropsWithChildren<ModuleCarouselProps>> = ({ list, activeIndex, setActiveIndex, children, dotsStyle }) => {
	const carouselRef = useRef<CarouselRef | null>(null);
	useEffect(() => {
		carouselRef.current?.goTo(activeIndex);
	}, [activeIndex]);
	return (
		<div>
			<Carousel
				dots={false}
				ref={carouselRef}
				style={{ width: "calc(22vw - 16px)" }}
				afterChange={(currentSlide: number) => {
					setActiveIndex(currentSlide);
				}}
			>
				{children}
			</Carousel>
			<StyledDots style={{ ...(dotsStyle || {}) }} className={`absolute left-1/2 translate-x-[-50%] bottom-6 ${list.length > 1 ? "flex" : "hidden"}`}>
				{list.map((_, index) => (
					<div
						key={index}
						onClick={e => {
							e.stopPropagation();
							setActiveIndex(index);
						}}
						className={`mr-1 rounded-full cursor-pointer transition-colors trans ease-linear dot ${
							activeIndex === index ? "bg-black active" : "bg-slate-200 normal"
						}`}
					/>
				))}
			</StyledDots>
		</div>
	);
};
